<template>
  <div class="container">
    <div style="height: 60px">
      <div class="title">
        <div
          class="logo"
          :style="{ width: innerWidth == availWidth ? '11%' : '17%' }"
        >
          <div class="logo_container">
            <div class="image">
              <img src="../../assets/wangyiyun.png" />
            </div>
            <div class="timu">网易云音乐</div>
          </div>
        </div>
        <div class="icons">
          <div class="icons_container">
            <div class="icon" @click="returnPage">
              <i class="el-icon-arrow-left"></i>
            </div>
            <div class="icon" @click="goPage">
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
        <div :style="{ marginRight: innerWidth == availWidth ? '720px' : '320px' }" class="search_box">
          <el-input
            clearable
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="searchInfo.searchKeywords"
            size="mini"
            ref="elInput"
            @focus="showSearch"
            @blur="closeSearch"
            @input="writeSearch"
            @keyup.enter.native="searchEnter"
          >
          </el-input>
          <transition name="el-fade-in">
            <div class="child_search_box" v-show="isShowSearch">
              <div class="child_search_box_history">
                <div class="child_search_box_history_head">
                  <div class="child_search_box_history_head_inside">
                    <span>搜索历史</span>
                    <i
                      v-if="historyList.length == 0 ? false : true"
                      class="el-icon-delete"
                      @click="clearHistoryList"
                    ></i>
                  </div>
                </div>
                <div class="child_search_box_history_list">
                  <div class="child_search_box_history_list2">
                    <div
                      class="child_search_box_history_list_inside"
                      v-for="(item, index) in historyList"
                      :key="index"
                      @mouseout="noneIcon(index)"
                      @mouseover="blockIcon(index)"
                      @click="find(item)"
                    >
                      <div class="child_search_box_history_list_inside_border">
                        <div class="child_search_box_history_list_inside_text">
                          {{ item }}
                        </div>
                        <div>
                          <i
                            ref="closeIcon"
                            @click.stop="deleteHistoryList(index)"
                            class="el-icon-close"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="child_search_box_hot">
                <div class="child_search_box_hot_title">
                  <div class="child_search_box_hot_title_childTitle">
                    热搜榜
                  </div>
                </div>
                <div class="child_search_box_hot_contact">
                  <div
                    class="child_search_box_hot_contact_inside"
                    v-for="(item, index) in searchHotList"
                    :key="index"
                  >
                    <div
                      class="child_search_box_hot_contact_inside_index"
                      :class="{
                        child_search_box_hot_contact_inside_index_active:
                          index < 3,
                      }"
                    >
                      {{ index + 1 }}
                    </div>
                    <div
                      @click="addHistoryList(item.searchWord)"
                      class="child_search_box_hot_contact_inside_container"
                      :style="{
                        justifyContent:
                          item.content == '' ? 'center' : 'space-between',
                      }"
                    >
                      <div
                        class="
                          child_search_box_hot_contact_inside_container_top
                        "
                      >
                        <span class="singTitle">{{ item.searchWord }}</span>
                        <div
                          class="
                            child_search_box_hot_contact_inside_container_top_img
                          "
                          v-if="item.iconUrl == null ? false : true"
                          :style="{
                            width: item.iconType == 5 ? '17px' : '30px',
                          }"
                        >
                          <el-image :src="item.iconUrl"></el-image>
                        </div>
                        <span class="singCount">{{ item.score }}</span>
                      </div>
                      <div
                        class="
                          child_search_box_hot_contact_inside_container_bottom
                        "
                      >
                        {{ item.content }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </transition>
          <transition name="el-fade-in">
            <div class="input_search" v-show="showInputSearch">
              <div class="input_search_head">
                <div class="input_search_head_inside">
                  搜<span>"{{ searchInfo.searchKeywords }}"</span>相关的结果
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <div class="input_search_contact">
                <div class="input_search_contact_title">
                  <div class="input_search_contact_title_inside">
                    <i class="el-icon-headset" />
                    <span>单曲</span>
                  </div>
                </div>
                <div class="no_data" v-if="sing.length == 0">无任何数据</div>
                <div class="input_search_contact_list" v-else>
                  <div class="input_search_contact_list_inside">
                    <div
                      class="input_search_contact_list_inside_this"
                      v-for="(item, index) in sing"
                      :key="index"
                      @click="
                        addHistoryList2(
                          item.name,
                          item.artists,
                          item.album.artist.img1v1Url,
                          item.id
                        )
                      "
                    >
                      <span
                        class="input_search_contact_list_inside_this_biaoti"
                        v-html="changeColor(item.name)"
                      ></span>
                      -
                      <span
                        class="input_search_contact_list_inside_this_zuozhe"
                        v-for="(childItem, index) in item.artists"
                        :key="childItem.id"
                        v-html="changeColor(childItem.name)"
                      >
                        {{
                          (index == item.artists.length - 1 &&
                            childItem.name) ||
                          childItem.name + "/"
                        }}
                      </span>
                    </div>
                  </div>
                </div>

                <div class="input_search_contact_title">
                  <div class="input_search_contact_title_inside">
                    <i class="el-icon-headset" />
                    <span>歌手</span>
                  </div>
                </div>
                <div class="no_data" v-if="song.length == 0">无任何数据</div>
                <div class="input_search_contact_list" v-else>
                  <div class="input_search_contact_list_inside">
                    <div
                      class="input_search_contact_list_inside_this"
                      v-for="(item, index) in song"
                      :key="index"
                      @click="addHistoryList3(item.name, item.id)"
                    >
                      <span
                        class="input_search_contact_list_inside_this_biaoti"
                        v-html="changeColor(item.name)"
                      ></span>
                    </div>
                  </div>
                </div>

                <div class="input_search_contact_title">
                  <div class="input_search_contact_title_inside">
                    <i class="el-icon-headset" />
                    <span>歌单</span>
                  </div>
                </div>
                <div class="no_data" v-if="zhuanJi.length == 0">无任何数据</div>
                <div class="input_search_contact_list" v-else>
                  <div class="input_search_contact_list_inside">
                    <div
                      class="input_search_contact_list_inside_this"
                      v-for="(item, index) in zhuanJi"
                      :key="index"
                      @click="addHistoryList4(item.name, item.id)"
                    >
                      <span
                        class="input_search_contact_list_inside_this_biaoti"
                        v-html="changeColor(item.name)"
                      ></span>
                      -
                      <span
                        class="input_search_contact_list_inside_this_zuozhe"
                        v-for="(childItem, index) in item.artists"
                        :key="childItem.id"
                        v-html="changeColor(childItem.name)"
                      >
                        {{
                          (index == item.artists.length - 1 &&
                            childItem.name) ||
                          childItem.name + "/"
                        }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </transition>
        </div>
        <div class="shezhiIcon">
          <i
            :title="$store.state.musicInfo.showAplayer ? '隐藏' : '显示'"
            @click="isShow"
            style="
              -webkit-app-region: no-drag;
              font-size: 21px;
              color: white;
              cursor: pointer;
              margin-right: 20px;
            "
            :class="
              $store.state.musicInfo.showAplayer
                ? 'el-icon-folder-remove'
                : 'el-icon-folder-add'
            "
          />
        </div>
        <div class="shezhiIcon">
          <el-popover placement="bottom" width="300" trigger="click">
            <span class="shezhiIcon_title">纯色</span>
            <div class="shezhiIcon_contact">
              <div
                class="shezhiIcon_contact_color"
                :style="{ background: item }"
                v-for="(item, index) in colorList"
                :key="index"
                @click="changeColors(item)"
              ></div>
            </div>
            <i title="换肤" slot="reference" class="el-icon-picture-outline" />
          </el-popover>
        </div>
        <div class="shezhiIcon">
          <i title="设置" @click="goingSetting" class="el-icon-setting" />
        </div>
        <div class="caozuoIcon">
          <i
            title="最小化"
            @click="handleClick('minimize')"
            class="el-icon-minus"
          />
          <i
            :title="innerWidth == availWidth ? '缩小' : '放大'"
            @click="handleClick('window-max')"
            :class="
              innerWidth == availWidth
                ? 'el-icon-copy-document'
                : 'el-icon-full-screen'
            "
          />
          <i
            title="关闭"
            @click="handleClick($store.state.chooseClose)"
            class="el-icon-close"
          />
        </div>
      </div>
    </div>
    <div class="nav_container">
      <div style="height: 550px; width: 20%">
        <div class="nav_container_left">
          <el-menu
            router
            :default-active="$route.path"
            active-text-color="#000000"
            text-color="#000000"
          >
            <el-menu-item index="/lookMusic">
              <span
                :class="{
                  activeStyle:
                    $route.path == '/lookMusic/geXing' ||
                    $route.path == '/lookMusic/zhuangShu' ||
                    $route.path == '/lookMusic/geDan' ||
                    $route.path == '/lookMusic/paiHangBang' ||
                    $route.path == '/lookMusic/geShou' ||
                    $route.path == '/lookMusic/newSong',
                }"
                slot="title"
                >发现音乐</span
              >
            </el-menu-item>
            <el-menu-item index="/shiping">
              <span
                :class="{ activeStyle: $route.path == '/shiping' }"
                slot="title"
                >视频</span
              >
            </el-menu-item>
            <el-menu-item index="/pengyou">
              <span
                :class="{ activeStyle: $route.path == '/pengyou' }"
                slot="title"
                >朋友</span
              >
            </el-menu-item>
            <el-menu-item index="/zhibo">
              <span
                :class="{ activeStyle: $route.path == '/zhibo' }"
                slot="title"
                >直播</span
              >
            </el-menu-item>
          </el-menu>
        </div>
      </div>
      <div class="nav_container_right">
        <router-view v-if="isRouterAlive"></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { commonJs, boFangSing } from "../../common/mixin/commonJs";
import { searchHot, search } from "../../api/index";
import _ from "lodash";
export default {
  mixins: [commonJs, boFangSing],
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      isRouterAlive: true,
      showInputSearch: false,
      isShowSearch: false,
      historyList: [],
      searchHotList: [],
      sing: [],
      zhuanJi: [],
      song: [],
      demo: "视频",
      searchInfo: {
        searchKeywords: "",
        limit: 10,
      },
      colorList: [
        "#ffffff",
        "#ff5c8a",
        "#ff7a9e",
        "#717ff9",
        "#4791eb",
        "#39afea",
        "#2bb669",
        "#6acc19",
        "#e2ab12",
        "#ff8f57",
        "#fd726d",
        "#fd544e",
      ],
    };
  },
  methods: {
    isShow() {
      this.$store.state.musicInfo.showAplayer =
        !this.$store.state.musicInfo.showAplayer;
    },
    searchEnter() {
      if (
        this.searchInfo.searchKeywords == "" ||
        this.searchInfo.searchKeywords == null ||
        this.searchInfo.searchKeywords == undefined
      ) {
        return;
      } else {
        this.judgeHistoryList(this.searchInfo.searchKeywords);
        this.jumpSearchInfo(this.searchInfo.searchKeywords);
        this.$refs.elInput.blur();
      }
    },
    jumpSearchInfo(searchValue) {
      this.$router.push({
        path: "/searchInfo",
        query: {
          searchValue,
        },
      });
      this.reload();
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
    goingSetting() {
      this.$router.push({
        path: "/setUp",
      });
    },
    find(item) {
      this.searchInfo.searchKeywords = item;
      this.jumpSearchInfo(this.searchInfo.searchKeywords);
    },
    deleteHistoryList(index) {
      this.historyList.splice(index, 1);
      localStorage.setItem("historyList", this.historyList);
      this.$refs.elInput.focus();
    },
    noneIcon(index) {
      this.$refs.closeIcon[index].style.display = "none";
    },
    blockIcon(index) {
      this.$refs.closeIcon[index].style.display = "block";
    },
    addHistoryList(searchWord) {
      this.judgeHistoryList(searchWord);
      this.searchInfo.searchKeywords = searchWord;
      this.jumpSearchInfo(this.searchInfo.searchKeywords);
    },
    addHistoryList2(name, artists, picUrl, id) {
      this.judgeHistoryList(name);
      this.showInputSearch = false;
      this.boFangSing(name, artists, picUrl, id);
    },
    addHistoryList3(name, id) {
      this.judgeHistoryList(name);
      this.showInputSearch = false;
      this.$router.push({
        path: "/geShou",
        query: {
          id,
        },
      });
      this.reload();
    },
    addHistoryList4(name, id) {
      this.judgeHistoryList(name);
      this.showInputSearch = false;
      this.$router.push({
        path: "/geDanInfo",
        query: {
          id,
        },
      });
      this.reload();
    },
    judgeHistoryList(name) {
      if (this.historyList.indexOf(name) == -1) {
        this.historyList.push(name);
        localStorage.setItem("historyList", this.historyList);
      } else {
        return;
      }
    },
    clearHistoryList() {
      this.$confirm("确定删除历史记录?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true,
      })
        .then(() => {
          this.$message({
            showClose: true,
            type: "success",
            message: "删除成功!",
          });
          this.historyList.length = 0;
          localStorage.setItem("historyList", this.historyList);
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: "info",
            message: "已取消删除",
          });
        });
    },
    changeColor(str) {
      const reg = new RegExp(this.searchInfo.searchKeywords, "g");
      return str.replace(
        reg,
        `<span style="color: rgb(118, 123, 196);">${this.searchInfo.searchKeywords}</span>`
      );
    },
    showSearch() {
      if (
        this.searchInfo.searchKeywords == null ||
        this.searchInfo.searchKeywords == undefined ||
        this.searchInfo.searchKeywords == ""
      ) {
        this.isShowSearch = true;
      } else {
        this.writeSearch();
      }
    },
    closeSearch() {
      this.isShowSearch = false;
      this.showInputSearch = false;
    },
    returnPage() {
      if (history.length == 1) {
        this.$message({
          showClose: true,
          message: "这是第一页了",
          type: "success",
        });
      } else {
        history.back();
      }
    },
    goPage() {
      if (history.length == 1) {
        this.$message({
          showClose: true,
          message: "这是第一页了",
          type: "success",
        });
      } else {
        history.forward();
      }
    },
    handleClick(type) {
      switch (type) {
        case "minimize":
          ipcRenderer.send("minimize");
          break;
        case "close":
          ipcRenderer.send("close");
          break;
        case "Tray":
          ipcRenderer.send("Tray");
          break;
        case "window-max":
          ipcRenderer.send("window-max");
          break;
      }
    },
    changeColors(color) {
      document
        .getElementsByTagName("body")[0]
        .style.setProperty("--wangYiYunColor", color);
      localStorage.setItem("color", color);
    },
    writeSearch: _.debounce(function () {
      if (
        this.searchInfo.searchKeywords == null ||
        this.searchInfo.searchKeywords == undefined ||
        this.searchInfo.searchKeywords == ""
      ) {
        this.closeSearch();
        return;
      } else {
        search({
          keywords: this.searchInfo.searchKeywords,
          type: 1,
          limit: this.searchInfo.limit,
        }).then((res) => {
          this.sing = res.result.songs;
        });
        search({
          keywords: this.searchInfo.searchKeywords,
          type: 100,
          limit: this.searchInfo.limit,
        }).then((res) => {
          this.song = res.result.artists;
        });
        search({
          keywords: this.searchInfo.searchKeywords,
          type: 1000,
          limit: this.searchInfo.limit,
        }).then((res) => {
          this.zhuanJi = res.result.playlists;
          this.showInputSearch = true;
        });
      }
    }, 300),
  },
  created() {
    searchHot().then((res) => {
      this.searchHotList = res.data.slice(0, 10);
    });
    if (localStorage.getItem("historyList")) {
      this.historyList = localStorage.getItem("historyList").split(",");
    } else {
      console.log("no");
    }
  },
};
</script>

<style lang="scss">
@import "../../common/css/commonStyle";
.shezhiIcon_title {
  font-size: 16px;
  font-weight: 800;
  width: 40px;
  height: 30px;
  @include flex;
  border-bottom: 1px solid $wangYiYunColor;
  margin-bottom: 10px;
}
.shezhiIcon_contact {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .shezhiIcon_contact_color {
    border-radius: 5px;
    width: 40px;
    height: 40px;
    margin-bottom: 5px;
    margin-right: 5px;
    cursor: pointer;
    border: 1px solid rgb(206, 203, 203);
  }
}
.container {
  width: 100%;
  height: 100%;
  .title {
    width: 100%;
    height: 60px;
    background-color: $wangYiYunColor;
    display: flex;
    position: fixed;
    z-index: 3;
    -webkit-app-region: drag;
    .logo {
      //background: blue;
      //height: 100%;
      width: 17%;
      display: flex;
      justify-content: center;
      .logo_container {
        -webkit-app-region: no-drag;
        width: 78%;
        //background: chartreuse;
        //height: 100%;
        @include flex;
        .image {
          width: 30px;
          height: 30px;
          //background: yellow;
          @include flex;
        }
        .timu {
          width: 110px;
          @include flex;
          font-size: 18px;
          color: white;
        }
      }
    }
    .icons {
      @include flex;
      //background: yellow;
      //height: 100%;
      width: 10%;
      .icons_container {
        -webkit-app-region: no-drag;
        width: 55%;
        //background: chocolate;
        //height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .icon {
          background-color: #ebecec;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          @include flex;
          cursor: pointer;
        }
      }
    }
    .search_box {
      -webkit-app-region: no-drag;
      margin-right: 320px;
      @include flex;
      //background: yellow;
      // height: 100%;
      // width: 13%;
      .el-input {
        width: 160px;
      }
      .child_search_box {
        box-shadow: 5px 5px 5px #c5c0c0;
        width: 400px;
        height: 450px;
        z-index: 9;
        position: absolute;
        border-radius: 5px;
        background: white;
        top: 48px;
        left: 230px;
        overflow-y: auto;
        .child_search_box_history {
          width: 100%;
          margin-bottom: 10px;
          border-bottom: 1px solid #e6e0e0;
          .child_search_box_history_head {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;

            .child_search_box_history_head_inside {
              width: 80px;
              height: 40px;
              // background: chartreuse;
              margin-left: 20px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              span {
                font-size: 15px;
                color: #777373;
              }
              .el-icon-delete {
                font-size: 18px;
                color: #777373;
                cursor: pointer;
              }
            }
          }
          .child_search_box_history_list {
            width: 100%;
            display: flex;
            justify-content: center;
            .child_search_box_history_list2 {
              display: flex;
              flex-wrap: wrap;
              width: 95%;
              .child_search_box_history_list_inside {
                @include flex;
                margin-bottom: 5px;
                margin-right: 5px;
                .child_search_box_history_list_inside_border {
                  cursor: pointer;
                  @include flex;
                  border: 1px solid #e6e0e0;
                  border-radius: 50px;
                  padding: 10px;
                  transition: background 0.5s;
                  .child_search_box_history_list_inside_text {
                    font-size: 12px;
                  }
                  .el-icon-close {
                    display: none;
                  }
                }
                .child_search_box_history_list_inside_border:hover {
                  background: rgba(236, 234, 234, 0.753);
                }
              }
            }
          }
        }
        .child_search_box_hot {
          width: 100%;
          .child_search_box_hot_title {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
            .child_search_box_hot_title_childTitle {
              width: 90%;
              font-size: 15px;
              color: #777373;
            }
          }
          .child_search_box_hot_contact {
            width: 100%;
            .child_search_box_hot_contact_inside:hover {
              background: rgb(224, 223, 223);
            }
            .child_search_box_hot_contact_inside {
              transition: background 0.3s;
              cursor: pointer;
              width: 100%;
              height: 60px;
              // background: chartreuse;
              margin-bottom: 10px;
              display: flex;
              align-items: center;
              .child_search_box_hot_contact_inside_index {
                height: 100%;
                width: 60px;
                @include flex;
                //background: chocolate;
              }
              .child_search_box_hot_contact_inside_index_active {
                color: $wangYiYunColor;
              }
              .child_search_box_hot_contact_inside_container {
                height: 80%;
                width: 85%;
                //background: cornflowerblue;
                display: flex;
                flex-direction: column;
                .child_search_box_hot_contact_inside_container_top {
                  width: 100%;
                  display: flex;
                  .singTitle {
                    font-size: 14px;
                    font-weight: 800;
                    margin-right: 5px;
                  }
                  .child_search_box_hot_contact_inside_container_top_img {
                    height: 17px;
                    margin-right: 5px;
                    .el-image {
                      width: 100%;
                      height: 100%;
                    }
                  }
                  .singCount {
                    font-size: 14px;
                    font-weight: 200;
                    color: #777373;
                  }
                }
                .child_search_box_hot_contact_inside_container_bottom {
                  width: 100%;
                  font-size: 14px;
                  font-weight: 200;
                  color: #777373;
                  @include white_space;
                }
              }
            }
          }
        }
      }
      .input_search {
        box-shadow: 5px 5px 5px #c5c0c0;
        width: 400px;
        height: 450px;
        z-index: 9;
        position: absolute;
        border-radius: 5px;
        background: white;
        top: 48px;
        left: 230px;
        overflow-y: auto;
        .input_search_head {
          width: 100%;
          height: 40px;
          //background: green;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
          display: flex;
          justify-content: center;

          .input_search_head_inside {
            width: 95%;
            height: 100%;
            //background: chocolate;
            display: flex;
            align-items: center;
            font-size: 13px;
            span {
              color: rgb(118, 123, 196);
            }
          }
        }
        .input_search_contact {
          width: 100%;
          .input_search_contact_title {
            width: 100%;
            height: 40px;
            background: rgb(201, 200, 200);
            display: flex;
            justify-content: center;
            .input_search_contact_title_inside {
              width: 95%;
              height: 100%;
              //background: chocolate;
              display: flex;
              align-items: center;
              span {
                font-size: 13px;
                margin-left: 10px;
              }
            }
          }
          .no_data {
            width: 100%;
            height: 40px;
            @include flex;
            font-size: 13px;
          }
          .input_search_contact_list {
            width: 100%;
            // height: 10px;
            display: flex;
            justify-content: center;
            .input_search_contact_list_inside {
              width: 82%;
              //height: 100%;
              //background: chocolate;
              .input_search_contact_list_inside_this {
                font-size: 13px;
                padding-top: 10px;
                padding-bottom: 10px;
                width: 100%;
                display: flex;
                align-items: center;
                @include white_space;
                cursor: pointer;
                .input_search_contact_list_inside_this_biaoti {
                  margin-right: 5px;
                }
                .input_search_contact_list_inside_this_zuozhe {
                  margin-left: 5px;
                }
              }
            }
          }
        }
      }
    }
    .shezhiIcon {
      @include flex;
      .el-icon-setting {
        -webkit-app-region: no-drag;
        font-size: 21px;
        color: white;
        cursor: pointer;
        margin-right: 20px;
      }
      .el-icon-picture-outline {
        -webkit-app-region: no-drag;
        font-size: 21px;
        color: white;
        cursor: pointer;
        margin-right: 20px;
      }
    }
    .caozuoIcon {
      -webkit-app-region: no-drag;
      width: 13%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 21px;
      color: white;
      cursor: pointer;
    }
  }
  .nav_container {
    width: 100%;
    //height: 580px;
    //background: green;
    display: flex;
    .nav_container_left {
      width: 20%;
      //background: yellow;
      position: fixed;
      z-index: 3;
      .el-menu {
        height: 550px;
      }
      .activeStyle {
        font-size: 19px;
        font-weight: 800;
      }
    }
    .nav_container_right {
      //height: 100%;
      width: 80%;
      //background: pink;
      display: flex;
      justify-content: center;
    }
  }
}
.el-button--primary {
  background: $wangYiYunColor;
  border-color: $wangYiYunColor;
}
.el-button--primary:hover {
  background: #c73445;
  border-color: #c73445;
}
</style>
